<style include="network-shared md-select iron-flex">
  a {
    margin-inline-start: 4px;
  }

  cr-input {
    margin-bottom: 4px;
    /* Aligns with the start of cr-radio-button's text. */
    margin-inline-start: 38px;
  }

  cr-radio-group {
    --cr-radio-group-item-padding: 12px;
    width: 100%;
  }

  .nameservers {
    /* Aligns with the start of cr-radio-button's text. */
    margin-inline-start: 38px;
    padding-bottom: 0;
    padding-top: 0;
  }

  .nameservers:not([changeable]) {
    opacity: var(--cr-disabled-opacity);
  }

  #radioGroupDiv {
    align-items: center;
    display: block;
    padding-inline-end: var(--cr-section-padding);
    padding-inline-start: var(--cr-section-padding);
  }

  cr-policy-indicator {
    /* Aligns with the other policy indicators. */
    margin-inline-end: calc(var(--settings-control-label-spacing) + 34px);
  }
</style>

<div class="property-box">
  <div class="start">
    [[i18n('networkNameservers')]]
  </div>
  <cr-policy-indicator indicator-type="[[getPolicyIndicatorType(
      managedProperties.nameServersConfigType)]]">
  </cr-policy-indicator>
</div>
<div id="radioGroupDiv">
  <cr-radio-group id="nameserverType" class="layout vertical"
      selected="[[nameserversType_]]"
      on-selected-changed="onTypeChange_"
      aria-label="[[i18n('networkNameservers')]]"
      disabled="[[disabled]]">
    <!-- Automatic nameservers -->
    <cr-radio-button name="[[nameserversTypeEnum_.AUTOMATIC]]"
      disabled="[[!canChangeConfigType_]]">
      [[i18n('networkNameserversAutomatic')]]
    </cr-radio-button>
    <template is="dom-if" if="[[showNameservers_(nameserversType_,
        nameserversTypeEnum_.AUTOMATIC, nameservers_)]]">
      <div class="nameservers" changeable$="[[canChangeConfigType_]]">
        [[getNameserversString_(nameservers_)]]
      </div>
    </template>

    <!-- Google nameservers -->
    <cr-radio-button name="[[nameserversTypeEnum_.GOOGLE]]"
      disabled="[[!canChangeConfigType_]]">
      [[i18n('networkNameserversGoogle')]]
      <template is="dom-if"
          if="[[i18nExists('networkGoogleNameserversLearnMoreUrl')]]">
        <a href="[[i18n('networkGoogleNameserversLearnMoreUrl')]]"
            target="_blank" on-click="doNothing_">
          [[i18n('networkNameserversLearnMore')]]
        </a>
      </template>
    </cr-radio-button>
    <template is="dom-if" if="[[showNameservers_(nameserversType_,
        nameserversTypeEnum_.GOOGLE, nameservers_)]]">
      <div class="nameservers" changeable$="[[canChangeConfigType_]]">
        [[getNameserversString_(nameservers_)]]
      </div>
    </template>

    <!-- Custom nameservers -->
    <cr-radio-button name="[[nameserversTypeEnum_.CUSTOM]]"
      disabled="[[!canChangeConfigType_]]">
      [[i18n('networkNameserversCustom')]]
    </cr-radio-button>
    <template is="dom-if" if="[[showNameservers_(nameserversType_,
        nameserversTypeEnum_.CUSTOM)]]">
      <div class="property-box single-column two-line">
        <template is="dom-repeat" items="[[nameservers_]]">
          <cr-input id="nameserver[[index]]" value="{{item}}"
              aria-label="[[getCustomNameServerInputA11yLabel_(index)]]"
              on-change="onValueChange_"
              disabled="[[!canEditCustomNameServers_(nameserversType_,
                  managedProperties)]]">
          </cr-input>
        </template>
      </div>
    </template>
  </cr-radio-group>
</div>
